<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title></title>
    <script src="js/jquery-3.1.1.js">
        
    </script>
    <style>
    body{
        width: 1000px;
        text-align: center;
        position: relative;
        background-color: lightblue;
        height: 1000px;
    }
    *{
        padding: 0;
        margin: 0;
    }
        div{
            width: 300px;
            height: 200px;
            background-color: #fff;
            display: none;
           position: absolute;
           cursor: pointer;
        }
        p{
            width: 100%;
            height: 30px;
            background-color: lightgray;
            text-align: center;
            line-height: 30px;
            position: relative;
            margin-bottom: 40px;
        }
        span:nth-of-type(2){
            position: absolute;
            right:10px;
        }
       form{
           width: 220px;
           margin: 10px auto;
           
       }
       input{
           height: 23px;
           margin:5px;
       }
       button[type=submit]{
           width: 180px;
           height: 28px;
           margin:10px 15px;
           background-color: #ccc;
           outline: none;
           border: none;
       }
       button[type=button]{
           position: fixed;
           bottom:10px;
           margin: 10px auto;
       }
       
    </style>
</head>
<body>
    <div>
        <p><span>用户登录</span><span>x</span></p>
        <form>
            <label for="">账号</label>
            <input type="text" name="" value="" placeholder="请输入用户名">
            <label for="">密码</label>
            <input type="password" placeholder="请输入密码">
            <button type="submit">登陆</button>
        </form>
    </div>
    <button type="button">来点我</button>
</body>
</html>
<script>
    $(':button').click(function(){
        $('div').show();
    })
    $(window).on('mousemove',function(){
        move();
    })
    $(window).resize(function(){
        move();
    })
    function move(){
         $('div')[0].style.left =$(window).scrollLeft() + ($(window).width()-$('div').width())/2+'px';
        $('div')[0].style.top= $(window).scrollTop() + ($(window).height()-$('div').height())/2+'px';
    }
    $('span:last').click(function(){
        $('div').hide();
    })
   
       $('div').on('drag',function(ev){
           ev.draggable='true';
        //   ev.delegateTarget.dataset.draggable='true';
        //   console.dir(ev.delegateTarget.dataset.draggable)
           $(this)[0].style.left=ev.pageX+'px';
           $(this)[0].style.top=ev.pageY+'px';
       })
   
</script>